{% extends "blog/base.html" %}

{% block main%}
<div class="row">
    <div id="vmaig-content" class="col-md-8 col-lg-9">
        <div id="tool" class="well clearfix">
            <div class="tags">
                <div class="tag-list" style="float:left">
                    <label class="active">
                        全部
                        <input type="radio" name="category" value="all" style="display:none"></input>
                    </label>
                    {% for category in category_list%}
                    <label>
                        {{category.name}}
                        <input type="radio" name="category" value="{{category.name}}" style="display:none"></input>
                    </label>
                    {% endfor%}
                </div>
            </div>
        </div>

        <div class="well">
            <div class="sort">
                <label>
                    <input type="radio" name="sort" value="time" checked="checked"> 按时间排序
                </label>
                <label>
                    <input type="radio" name="sort" value="recommend"> 按热度排序
                </label>
                <label>
                    <input type="radio" name="sort" value="comment"> 按评论排序
                </label>
            </div>

            <div id="all-post-list">
                {% if article_list %}
                {% with post_list=article_list %}
                {% for post in post_list %} 
                    {% include "blog/include/all_post.html"%}
                {% endfor %}
                {% endwith %}
                {% endif %}
            </div>
            <div id="loading" style="height:100px;line-height:100px;text-align:center;display:none;">
                <img src="/static/img/loading.gif" alt="">
            </div>


        </div>
        <button id="all-post-more" type="button" class="btn btn-vmaig" value="all" style="width:100%">
            加载更多
            <span class="glyphicon glyphicon-menu-down"></span>
        </button>

    </div>

    <div id="vmaig-side" class="col-md-4 col-lg-3 hidden-xs">
        {% include "blog/widgets/tags_cloud.html"%}
        {% include "blog/widgets/search.html"%}
        {% include "blog/widgets/hotest_posts.html"%}
        {% include "vmaig_comments/latest_comments.html"%}
    </div>
</div>

{% endblock %}

{% block js%}
<script language="javascript" type="text/javascript">

    var start = 0;
    var end = parseInt({{PAGE_NUM}});

    $("input[name='category']").click(function(){
        start = 0;
        end = parseInt({{PAGE_NUM}});
        $("input[name='category']").parent().removeClass("active");
        $("#all-post-more")[0].style.display = "none";
        $("#loading")[0].style.display = "block";

        $("#all-post-list").empty();
        $(this).parent().addClass("active");
        $("#all-post-more").val($(this).val());
        $.ajax({
            type:"POST",
            url:"/all/",
            data:{"val":$(this).attr("value"),"sort":$("input[name='sort']:checked").val(),"start":start,"end":end},
            beforeSend:function(xhr){
                xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));  
            },
            success:function(data,textStatus){
                $("#loading")[0].style.display = "none";
                $('#all-post-list').append(data["html"]);
                if(data["isend"])
                {
                    $("#all-post-more")[0].style.display = "none";
                }else{
                    $("#all-post-more")[0].style.display = "block";
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.responseText);

            }
        });
    });

    $("input[name='sort']").click(function(){
        start = 0;
        end = parseInt({{PAGE_NUM}});
        $("#all-post-more")[0].style.display = "none";
        $("#loading")[0].style.display = "block";

        $("#all-post-list").empty();
        $.ajax({
            type:"POST",
            url:"/all/",
            data:{"val":$("label.active input").val(),"sort":$("input[name='sort']:checked").val(),"start":start,"end":end},
            beforeSend:function(xhr){
                xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));  
            },
            success:function(data,textStatus){
                $("#loading")[0].style.display = "none";
                $('#all-post-list').append(data["html"]);
                if(data["isend"])
                {
                    $("#all-post-more")[0].style.display = "none";
                }else{
                    $("#all-post-more")[0].style.display = "block";
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.responseText);
            }
        });

    });

    

    $("#all-post-more").click(function(){
        start = end;
        end += 5;
        $("#loading")[0].style.display = "block";
        $.ajax({
            type:"POST",
            url:"/all/",
            data:{"val":$(this).attr("value"),"sort":$("input[name='sort']:checked").val(),"start":start,"end":end},
            beforeSend:function(xhr){
                xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));  
            },
            success:function(data,textStatus){
                $("#loading")[0].style.display = "none";
                $("#all-post-more")[0].style.display = "none";
                $('#all-post-list').append(data["html"]);

                if(data["isend"])
                {
                    $("#all-post-more")[0].style.display = "none";
                }else{
                    $("#all-post-more")[0].style.display = "block";
                }

            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.responseText);
            }
        });
    });

</script>
{% endblock%}
